<template>
  <div class="page-container">
    <div class="menu-container animate__animated animate__fadeIn">
      <el-menu
          :default-active="activeIndex"
          :collapse="isCollapse"
          class="el-menu-vertical-1"
          background-color="#F6F3F1"
          text-color="#EC5F2D"
          active-background-color="#EF7070"
          mode="vertical"
          router
      >
        <el-menu-item index="/main/dataPreprocessing">
          <el-icon><User /></el-icon>
          <span>数据采集与处理</span>
        </el-menu-item>
        <el-menu-item index="/main/algorithmDesign">
          <el-icon><CoffeeCup /></el-icon>
          <span>算法实现</span>
        </el-menu-item>

      </el-menu>
    </div>

    <div :class="contentStyle">
      <div class="radio-box">
        <el-affix :offset="60" style="float: right;margin-right: 5%">
          <el-radio-group v-model="isCollapse" @change="handleRadioChange">
            <el-radio-button :value="false">
              <el-icon :size="12"><View /></el-icon>
              <span>&nbsp默认视口</span>
            </el-radio-button>
            <el-radio-button :value="true">
              <el-icon :size="12"><Hide /></el-icon>
              <span>&nbsp扩展视口</span>
            </el-radio-button>
          </el-radio-group>
        </el-affix>
      </div>
      <router-view></router-view>
    </div>


  </div>

</template>

<script setup>
import {
  CoffeeCup,
  Hide,
  View,
  User,
  House,
  CreditCard,
  Notebook,
  Opportunity,
  Promotion
} from "@element-plus/icons-vue";
import {ref} from "vue";

/*------------定义变量开始------------*/
//菜单序号
const activeIndex = ref('1')
//是否折叠
const isCollapse = ref(false)
//主体样式改变
const contentStyle = ref('content-container1');
/*------------定义变量结束------------*/

/*------------定义函数开始------------*/
const handleRadioChange = (value) => {
  if(value){
    contentStyle.value = 'content-container2'
  }else{
    contentStyle.value = 'content-container1'
  }
}
/*------------定义函数结束------------*/

</script>
<style scoped>
.page-container{
  margin-top: 50px;
  width: 100%;
  position: relative;
}
.el-menu-vertical-1{
  height: 100vh;
  position: fixed;
  overflow: hidden;
}
.radio-box{
  width: 100%;
}
.content-container1{
  margin-left: 15%;
  width: 85%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: width 0.5s linear, margin-left 0.5s linear;
}
.content-container2{
  margin-left: 5%;
  width: 95%;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition:  width 0.5s linear, margin-left 0.5s linear;
}
</style>